<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>页面跳转及传参</h3>
        <nav>
            <router-link to="/">主页</router-link>
            <br>
            <router-link to="/list">(1) 声明式导航 + 不带参数 跳转</router-link>
            <br>
            <router-link to="/detail/234">(2) 声明式导航 + 路径参数 跳转</router-link>
            <br>
            <!-- /item?a=100中，查询字符串不是地址的一部分，它可以匹配/item -->
            <router-link to="/item?a=100"> (3) 声明式导航 + 查询传参 跳转</router-link>
            <hr>
            编程式导航： 通过代码的方式来控制跳转
            <div>
                <button @click="hList">跳到list，不带参数</button>
                <button @click="hDetail">跳到Detail，路径传参</button>
                <button @click="hItem">跳到item，查询传参</button>
            </div>
        </nav>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        // 页面跳转有两种方式
        //    1. 声明式导航 ： router-link中的to  跳转
        //    2. 编程式导航 ： $router.push()    api跳转
                // $router是vue提供的一个对象，它用来操作路由。
                //  - push(path字符串) 跳转到指到的path。 
                // $route 是vue提供的一个对象，它保存当前的路由信息。

        // 传参有两种方式
        //    1. 路径传参 (参  数是路由的一部分)  /detail/100, /detail/101, ......
        //    2. 查询传参 (参数不是路由的一部分)  /detail?id=100,  /detail?id=101


        //  (1) 声明式导航 + 不带参数 跳转
        //   <router-link to="/list">(1) 声明式导航 + 不带参数 跳转</router-link>

         // (2) 声明式导航 + 路径参数 跳转 ===》动态路由
                // 1): 定义 {path: '/detail/:myid' }
                // 2): 跳转 to="/detail/100"
                // 3)：获取参数： this.$route.params.myid
         // (3) 声明式导航 + 查询传参 跳转
                // 1): 定义 {path: '/item' }
                // 2): 跳转 to="/item?a=100"  直接把查询字符串补充到hash的后面
                // 3)：获取参数： this.$route.query.a

        const myrouter = new VueRouter({
            routes: [
                {path: '/', component:{template:`<div>主页</div>`}},
                {path: '/list', component:{template:`<div>列表页</div>`}},
                {path: '/detail/:myid', component:{template:`<div>detail {{$route.params.myid}}</div>`}},
                {path: '/item', component:{template:`<div>item {{$route.query.a}}</div>`}}
            ]
        })

        new Vue({
            el: '#app',
            router: myrouter,
            methods: {
                hList () {
                    // 跳转到 /list 路由页面
                    this.$router.push('/list')
                },
                hDetail() {
                    // 跳转到 /detail, 路径传参
                    this.$router.push('/detail/' + Math.ceil( 100*Math.random())  )
                },
                hItem () {
                    // 跳转到 /item, 查询传参
                    this.$router.push('/item?a=' + Math.ceil( 100*Math.random())  )
                }
            }
        })
    </script>
</body>
</html>